<template>
  <div class="container">
    <a-table class="table" :rowKey="row => row.id" :pagination="pagination" :dataSource="list">
      <a-table-column title="奖品" width="100px">
        <template slot-scope="row">
          <div style="display: flex; align-items: center;">
            <img :src="row.thumb  + '?x-oss-process=image/resize,w_400'" class="thumb"  style="margin-right: 10px;" />
            <div>
              <div style="font-weight: 500; font-size: 110%;">
                {{row.title}} <a-tag v-if="row.sku_type_text === 'virtual_asset'" color='orange'>虚拟资产</a-tag>
              </div>
              <!-- <div>【{{row.sid}}】</div> -->
              <div>
                <PriceDisplay :info="row"></PriceDisplay>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px;">
            <img @click="$viewImage(url)" v-for="(url, index) in row.images" :src="url" class="content-image"></img>
          </div>
        </template>
      </a-table-column>
      
      <a-table-column title="数量（剩余数量）" width="60px">
        <template slot-scope="row">
          <div>{{row.total}}</div>
        </template>
      </a-table-column>
      <a-table-column title="状态" width="60px">
        <template slot-scope="row">
          <div>{{row.union_status_text}}</div>
        </template>
      </a-table-column>
      <a-table-column title="获得时间" width="60px">
        <template slot-scope="row">
          <div>{{row.created_at}}</div>
        </template>
      </a-table-column>
      
      <a-table-column title="获得途径" width="80px">
        <template slot-scope="row">
          <span v-if="row.source_type === 1">开奖所得</span>
          <span v-else-if="row.source_type === 2">转售所得</span>
          <span v-else-if="row.source_type === 3">抽奖所得</span>
          <span v-else-if="row.source_type === 4">兑换码兑换</span>
          <span v-else-if="row.source_type === 6">领主奖励所得</span>

          <div v-if="row.from_package_sku">来自: {{row.from_package_sku.sid}}</div>
          <div v-if="row.pay_order" style="margin-top: 6px;">{{row.pay_order.number}}</div>
        </template>
      </a-table-column>
      

      
    </a-table>


  </div>
</template>

<script>
  // import AttrEditor from "./components/AttrEditor"


  export default {
    components: {

    },
    data() {
      return {
        info: {},
        list: [],
        page: 1,
        per_page: 10,
        total: 0,
      }
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            this.page = e
            // this.per_page = e.pageSize
            this.initList()
          }
        }
      }
    },
    props: {
      list_record: ''
    },
    created() {
      this.info = this.list_record
      this.initList();
    },
    mounted() {},
    watch: {},
    methods: {
      cancel() {
        this.$router.back(-1)
      },
      initList() {
        this.$http.get(`/kapaishe/gift-record-sku`, {
          params: {
            gift_record_id: this.info.id,
            page: this.page,
            per_page: this.per_page,
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .form-container {
    padding-bottom: 120px;
  }

  .container {
    .btn {
      margin-right: 30px;
    }
  }

  .tips-c {
    margin-bottom: 20px;
    font-weight: 500;
  }

.thumb {
  height: 60px;
  border-radius: 6px;
}
</style>
